import React, { Component, useEffect, useState, useReducer } from 'react';
import { history } from 'umi';
import { HocComp } from './HOC/index';
import { DragMove } from './HOC/DragMove';
import Tab from './components/Tab';
import One from './components/One';
import Two from './components/Two';
// import DragBox from './components/DragBox';
import OrderDetail from './components/OrderDetail';
import Exapmple from './components/Exapmple';
import Example from './components/Example';
import ReactHook from './components/ReactHook';
import ModalBox from './components/ModalBox';
import Aaa from './components/aaa';
import './index.less';

const WithTab = HocComp(Tab);
const WithOne = HocComp(One);
const WithTwo = HocComp(Two);
// const WithDrag = DragMove(DragBox);

{
  /* <WithTab type="hot" cid={18} />
      <WithOne type="one" cid={18} />
      <WithTwo type="two" cid={18} /> */
}

// *-------------------------------------
export default function ActivityComment(props) {
  // const {} = props;
  let item = null;
  let lastY = null;
  const [comment, setComment] = useState(['东风快递', '使命必达', '犯我中华', '虽远必诛']);

  const dragBoxStart = (e) => {
    item = e.target;
    item.style.backgroundColor = 'mediumturquoise';
    lastY = e.clientY;
    e.dataTransfer.setData('Text', item.id);
  };

  const dragBoxEnter = (e) => {
    e.preventDefault();
    if (e.clientY > lastY) {
      e.target.after(document.getElementById(item.id));
    } else {
      e.target.before(document.getElementById(item.id));
    }
    lastY = e.clientY;
  };

  const addCommentDrop = (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('Text');
    if (e.clientY > lastY) {
      e.target.after(document.getElementById(data));
    } else {
      e.target.before(document.getElementById(data));
    }
    item.style.backgroundColor = 'mediumturquoise';
    item = null;
    lastY = null;
  };

  const addCommentOver = (e) => {
    e.preventDefault();
  };

  // todo 这是进度条
  // const [count, dispatch] = useReducer((state, action) => {});
  const [progressFlag, setProgressFlag] = useState(false);
  // todo 鼠标到浏览器左的距离
  const [progressInitial, setProgressInitial] = useState(0);
  // todo 盒子到父盒子左的距离
  const [progressLeft, setProgressLeft] = useState(-15);
  // todo 百分比
  const [progressNum, setProgressNum] = useState(0);

  const progressMouseDown = (e) => {
    setProgressFlag(true);
    setProgressInitial(window.event.pageX);
    setProgressLeft(e.target.offsetLeft);
  };

  const progressMove = (e) => {
    if (progressFlag) {
      document.querySelectorAll('.progressRound')[0].style.left = `${
        window.event.pageX - progressInitial + progressLeft <= -15
          ? -15
          : window.event.pageX - progressInitial + progressLeft >= 385
          ? 385
          : window.event.pageX - progressInitial + progressLeft
      }px`;
      document.querySelectorAll('.progressBarClone')[0].style.width = `${
        window.event.pageX - progressInitial + progressLeft <= -15
          ? 0
          : window.event.pageX - progressInitial + progressLeft >= 385
          ? 400
          : window.event.pageX - progressInitial + progressLeft + 15
      }px`;
      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
    setProgressNum(
      parseInt(
        ((parseInt(document.querySelectorAll('.progressRound')[0].style.left) + 15) / 400) * 100,
      ),
    );
  };

  const progressMouseMove = (e) => {};

  const progressMouseUp = () => {
    setProgressFlag(false);
  };

  const clickLeft = () => {
    document.querySelectorAll('.progressRound')[0].style.left = `-15px`;
    document.querySelectorAll('.progressBarClone')[0].style.width = `0px`;
  };

  const clickRight = () => {
    document.querySelectorAll('.progressRound')[0].style.left = `385px`;
    document.querySelectorAll('.progressBarClone')[0].style.width = `400px`;
  };

  const progressBarClick = (e) => {
    // console.log(window.event.pageX - e.target.getBoundingClientRect().left);
    // document.querySelectorAll('.progressRound')[0].style.left = `${
    //   window.event.pageX - e.target.getBoundingClientRect().left - 15
    // }px`;
    // document.querySelectorAll('.progressBarClone')[0].style.width = `${
    //   window.event.pageX - e.target.getBoundingClientRect().left
    // }px`;
  };

  // todo 这是测试
  const [count, dispatch] = useReducer((state, action) => {
    switch (action) {
      case 'increment':
        return state + 1;
      case 'decrement':
        return state - 1;
      default:
        throw new Error();
    }
  }, 0);

  return (
    <div>
      {/* 测试 */}
      <div className="test">
        Count: {count}
        <button onClick={() => dispatch('increment')}>+</button>
        <button onClick={() => dispatch('decrement')}>-</button>
      </div>

      <div className="addComment" onDrop={addCommentDrop} onDragOver={addCommentOver}>
        <div
          id="div1"
          key={1}
          className="dragBox"
          draggable={true}
          onDragStart={dragBoxStart}
          onDragEnter={dragBoxEnter}
        >
          {111}
        </div>
        <div
          id="div2"
          key={2}
          className="dragBox"
          draggable={true}
          onDragStart={dragBoxStart}
          onDragEnter={dragBoxEnter}
        >
          {222}
        </div>
        <div
          id="div3"
          key={3}
          className="dragBox"
          draggable={true}
          onDragStart={dragBoxStart}
          onDragEnter={dragBoxEnter}
        >
          {333}
        </div>
        {/* {comment.map((item, index) => {
          return (
            <div
              key={index}
              className="dragBox"
              draggable={true}
              onDragStart={dragBoxStart}
              onDragEnter={dragBoxEnter}
            >
              {item}
            </div>
          );
        })} */}
      </div>

      {/* 这是进度条 */}
      <div className="progress" onMouseMove={progressMove} onMouseUp={progressMouseUp}>
        <div className="progressNum">
          <div className="progressNumBox" onClick={clickLeft}>
            0
          </div>
          <div className="progressNumBox">{`${progressNum}%`}</div>
          <div className="progressNumBox" onClick={clickRight}>
            100
          </div>
        </div>
        <div className="progressBar" onClick={progressBarClick}>
          <div style={{ width: `${0}px` }} className="progressBarClone"></div>
          <div
            style={{ left: `${-15}px` }}
            className="progressRound"
            onMouseDown={progressMouseDown}
            onMouseMove={progressMouseMove}
            onMouseUp={progressMouseUp}
          >
            <div className="progressBarSon"></div>
          </div>
        </div>
      </div>

      {/* <OrderDetail />
      <Exapmple />
      <Example />
      <ReactHook />
      <ModalBox /> */}
      <Aaa />
    </div>
  );
}

// todo 盒子到浏览器的距离
// console.log(e.target.getBoundingClientRect().top);
// todo 盒子到父盒子的距离
// console.log(e.target.offsetTop);
// todo 鼠标到浏览器的距离
// console.log(window.event.pageY);
// todo 鼠标到父盒子距离
// console.log(window.event.pageY - e.target.getBoundingClientRect().top + e.target.offsetTop);
